<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataSource Management</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../sqlite.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h1>DataSource Management</h1>
        </el-header>
        <el-main>
            <el-table :data="dataSources" style="width: 100%" size="mini" border>
                <el-table-column prop="database" label="数据库"></el-table-column>
                <el-table-column prop="host" label="host"></el-table-column>
                <el-table-column prop="port" label="port"></el-table-column>
                <el-table-column prop="user" label="用户名"></el-table-column>
                <el-table-column prop="password" label="密码"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :visible.sync="dialogVisible" title="编辑" :append-to-body="true">
                <el-form ref="dataSourceForm" :model="dataSource" label-width="100px">
                    <el-form-item label="名称">
                        <el-input v-model="dataSource.database"></el-input>
                    </el-form-item>
                    <el-form-item label="host">
                        <el-input v-model="dataSource.host"></el-input>
                    </el-form-item>
                    <el-form-item label="port">
                        <el-input v-model="dataSource.port"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="dataSource.user"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="dataSource.password" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
        <el-footer>
            <el-button type="primary" @click="add" size="mini">新增</el-button>
        </el-footer>
    </el-container>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            dataSources: [],
            dataSource: {
                database: '',
                url: '',
                user: '',
                password: '',
                port:"",
                host:'',
            },
            dialogVisible: false,
        },
        async mounted() {

this.getList()
        },

        methods: {
            async getList() {
                var resultdata = await axios.get("/api/getDatabases").then(res => res.data)
                console.log("-> resultdata", resultdata);
                this.dataSources = resultdata && resultdata.data || [];
                },

            add() {
                this.dataSource = {
                    database: '',
                    url: '',
                    user: '',
                    password: '',
                    port:"",
                    host:'',
                };
                this.dialogVisible = true;
            },
            async edit(row) {
                this.dataSource = Object.assign({}, row);

                this.dialogVisible = true;
            },
            async save() {
                // TODO: 保存数据源
                var params=this.dataSource
                var func=params.id?()=>axios.post('/api/updateDatabase',params):()=>axios.post('/api/saveDatabase',params)
                    await func()

                this.getList()
                this.dialogVisible = false;
            },
            remove(row) {
                // TODO: 删除数据源
            },
        },
    });
</script>
</body>
</html>